<template>
  <div class="product-attr-group-relation-page">
    <ComplexTable
      ref="relationPage"
      :query-model="queryModel"
      :table-column-is-show="tableColumnIsShow"
      :create-permission="['pms:relation:create']"
      @onSearch="search"
    >
      <template v-slot:search_from_input>
        <el-form-item label="属性名称" prop="name">
          <el-input
            v-model="queryModel.name"
            placeholder="属性名称"
            clearable
          />
        </el-form-item>
      </template>
      <template v-slot:listButton>
        <el-button v-permission="['pms:attr-group:relation']" class="pan-btn green-btn" icon="el-icon-connection" @click="relations">关联</el-button>
      </template>

      <template v-slot:table_column>
        <el-table-column
          type="selection"
          width="40"
        />

        <el-table-column
          v-if="tableColumnIsShow.icon.isShow"
          prop="icon"
          label="icon"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.icon"
            />
          </template>
        </el-table-column>

        <el-table-column
          v-if="tableColumnIsShow.name.isShow"
          prop="name"
          label="属性分组名称"
          align="center"
          header-align="center"
        />
        <el-table-column
          v-if="tableColumnIsShow.categoryName.isShow"
          prop="categoryName"
          label="分类名称"
          align="center"
          header-align="center"
        />

        <el-table-column
          v-if="tableColumnIsShow.searchType.isShow"
          prop="searchType"
          label="是否需要检索"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.searchType ?'是':'否' }}
          </template>
        </el-table-column>

        <el-table-column
          v-if="tableColumnIsShow.valueSelect.isShow"
          prop="valueSelect"
          label="可选值"
          align="center"
          header-align="center"
        />

        <el-table-column
          v-if="tableColumnIsShow.attrType.isShow"
          prop="attrType"
          label="属性类型"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            {{ getSystemDictionaries("ATTRTYPE",scope.row.attrType) }}
          </template>
        </el-table-column>

        <el-table-column
          v-if="tableColumnIsShow.enable.isShow"
          prop="enable"
          label="启用状态"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.enable?'是':'否' }}
          </template>
        </el-table-column>

        <el-table-column
          v-if="tableColumnIsShow.showDesc.isShow"
          prop="showDesc"
          label="展示在介绍上"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.showDesc?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">

            <TableBtn :parameter="scope.row.id" :edit-permission="['pms:relation' ]" :del-permission="['pms:relation' ]">
              <template v-slot:table_btn>
                <el-button v-permission="['pms:attr-group:relation']" class="pan-btn green-btn" icon="el-icon-connection" @click="relation(scope.row)">添加关联</el-button>
              </template>
            </TableBtn>
          </template>
        </el-table-column>
      </template>
    </complextable>
  </div>
</template>
<script>
import permission from '@/directive/permission/index.js'
import ComplexTable from '@/components/ComplexTable'
import { pageAttrREQ } from '@/api/product/attr'
import { saveRelationREQ } from '@/api/product/attr-group'
import { mapGetters } from 'vuex'
import deepcopy from 'deepcopy'
import TableBtn from '@/components/TableBtn'
export default {
  name: 'RelationPage',
  components: { ComplexTable, TableBtn },
  directives: {
    permission
  },
  props: {
    categoryId: {
      type: String,
      default: ''
    },
    attrGroupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryModel: {
        name: '',
        categoryId: ''
      },
      tableColumnIsShow: {
        name: { label: '属性名称', isShow: true },
        categoryName: { label: '分类名称', isShow: true },
        attrType: { label: '属性类型', isShow: true },
        enable: { label: '是否启用', isShow: true },
        icon: { label: 'icon', isShow: true },
        searchType: { label: '是否需要检索', isShow: true },
        showDesc: { label: '展示在介绍上', isShow: true },
        valueSelect: { label: '可选值', isShow: true }
      }
    }
  },
  computed: {
    ...mapGetters({ 'getSystemDictionaries': 'dictionaries/getSystemDictionaries' })
  },
  mounted() {
    this.queryModel.categoryId = deepcopy(this.categoryId)
  },
  methods: {
    search(queryModel) {
      pageAttrREQ(queryModel).then((data) => {
        // 双重认证
        if (this.$refs['relationPage']) { this.$refs['relationPage'].setTableAndPage(data) }
      })
    }
  },
  relation(row) {
    if (row || row.id) {
      this.saveRelation({ 'attrId': row.id, 'attrGroupId': this.attrGroupId })
    }
  },
  relations(data) {

  },
  saveRelation(data) {
    saveRelationREQ(data).then(v => {
      this.$refs['relationPage'].onSearch()
    })
  }
}

</script>
<style lang='scss' scoped>
</style>
